<template>
  <p class="start" style="margin-top:40px">开始</p>
  <div class="option">
    <div class="group" @click="show()">
      <el-icon class="newIcon">
        <DocumentAdd/>
      </el-icon>
      <div class="content">
        <p class="title">新建文档</p>
        <span class="explain">文档、表格、脑图</span>
      </div>
      <el-icon class="downIcon">
        <ArrowDownBold/>
      </el-icon>
    </div>
    <div class="group" @click="showLibraryDialog()">
      <el-icon class="newIcon">
        <Memo/>
      </el-icon>
      <div class="content">
        <p class="title">协作文档</p>
        <span class="explain">使用链接协作编辑</span>
      </div>
    </div>

    <!-- 新建文档下的新建按钮菜单 -->
    <div :class="hovered ? 'group-menu' : 'hidden'">
      <div class="docu" @click="goNext(1)">新建文档</div>
      <div class="docu" @click="goNext(2)">新建表格</div>
      <div class="docu" @click="goNext(3)">新建脑图</div>
      <div style="border: 0.5px solid #ccc; width: 100%"></div>
      <div class="enter" @click="goNext(4)">导入</div>
    </div>
  </div>
  <p class="start" style="margin-top:50px;margin-bottom: 40px">快速开始</p>
  <div class="more">
    <el-card class="innovate" v-for="(item,index) in moreList" :key="index"><img :src="item.img" alt="">
    </el-card>
  </div>

  <!-- 查看分享弹出框 -->
  <el-dialog v-model="libraryVisible" title="查看分享" width="30vw">
    <el-form :model="house">
      <el-form-item>
        <p class="summary">分享链接</p>
        <el-input
            v-model="house.name"
            autocomplete="off"
            placeholder="请输入分享链接"
        />
      </el-form-item>
      <el-form-item>
        <p class="summary">编辑密码</p>
        <el-input
            v-model="house.brief"
            autocomplete="off"
            placeholder="请输入编辑密码"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="libraryVisible = false">取消</el-button>
        <el-button type="primary" @click="goShare()">
          进入
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 选择导入的文库弹出框 -->
  <el-dialog v-model="enterVisible" title="导入" width="30vw">
    <p>选择一个文库</p>
    <div class="name" v-for="(item,index) in knowList" :key="item.id" @click="getId(item.id)">
      <el-icon class="FolderOpened">
        <FolderOpened/>
      </el-icon>
      <p style="margin-left: 10px">{{ item.name }}</p>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {useRouter} from "vue-router";
import Api from '@/api/index.ts'
import {ElMessage} from "element-plus";

const router = useRouter();
// 获取用户创建的知识库
const knowList = ref([])
onMounted(() => {
  getOwn()
})
const getOwn = () => {
  Api.getOwn().then(res => {
    knowList.value = res.data.records
  }).catch((err) => {
    alert(err)
  })
}

// 点击事件
const hovered = ref(false);
const show = () => {
  hovered.value = !hovered.value;
};

//点击跳转网页
const nextIndex = ref()
const goNext = (index) => {
  enterVisible.value = true
  if (index === 1) {
    nextIndex.value = 1
  } else if (index === 2) {
    nextIndex.value = 2
  } else if (index === 3) {
    nextIndex.value = 3
  } else {
    nextIndex.value = 4
  }
};
const getId = (id) => {
  if (nextIndex.value === 1) {
    router.push({path: '/write', query: {id: id, source: 'home'}})
  } else if (nextIndex.value === 2) {
    router.push({path: '/sheet', query: {id: id}})
  } else if (nextIndex.value === 3) {
    router.push({path: '/mind', query: {id: id}})
  } else {
    console.log("导出")
  }
}

// 新建文库弹窗
const libraryVisible = ref(false);

const showLibraryDialog = () => {
  libraryVisible.value = true;
};

const house = ref({
  name: "",
  brief: "",
});

// 选择进入文库弹窗
const enterVisible = ref(false);

const goShare = () => {
  if (house.value.brief === '') {
    const data = {key: house.value.name, pwd: house.value.brief}
    Api.getShareKnow(data).then((res) => {
      if (res.code === 1) {
        Api.getShareDocu({key: house.value.name,}).then((res) => {
          if (res.code === 1) {
            if (res.data.check === true) {
              ElMessage.success('查找成功');
              if (res.data.type === 'document_html') {
                router.push({path: '/write', query: {id: res.data.id, source: 'share', pwd: false}})
              }
            } else {
              ElMessage.error('查找失败');
            }
          }
        })
      }
    })
  } else {
    const data = {key: house.value.name, pwd: house.value.brief}
    Api.getShareKnow(data).then((res) => {
      if (res.code === 1) {
        Api.getShareDocu({key: house.value.name, pwd: house.value.brief}).then((res) => {
          if (res.code === 1) {
            if (res.data.check === true) {
              ElMessage.success('查找成功');
              if (res.data.type === 'document_html') {
                router.push({path: '/write', query: {id: res.data.id, source: 'share', pwd: true}})
              }
            } else {
              ElMessage.error('查找失败');
            }
          }
        })
      }
    })
  }

};

// 快速开始列表
const moreList = ref([{
  title: "新建文本",
  img: 'https://rjb-document.oss-cn-beijing.aliyuncs.com/e792cacd-2953-4ae5-a1ec-a266c6f40835.png'
}, {
  title: "新建表格",
  img: 'https://rjb-document.oss-cn-beijing.aliyuncs.com/d768bb0f-fe56-4db4-a155-e29ebb142469.png'
}, {
  title: "新建脑图",
  img: 'https://rjb-document.oss-cn-beijing.aliyuncs.com/2ad81c46-6444-4646-9b6d-54fefd469642.png'
},])
</script>

<style scoped lang="less">
:root {
  --primary-color: #409EFF; /* 主题色 */
  --secondary-color: #ECF5FF; /* 淡化主题色 */
  --text-color: #333;
  --hover-color: #66B1FF;
  --font-family: 'Roboto', sans-serif;
}

.hidden {
  display: none;
}

.start {
  font-size: 18px;
  margin-left: 1.2vw;
  display: flex;
  padding-top: 18px;
}

.option {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 70%;
  height: 12vh;
  margin-top: 1.5vh;
  position: relative;
}

.group {
  width: 14vw;
  height: 8vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  margin-left: 20px;
  margin-right: 20px;
}

.newIcon {
  font-size: 25px;
  margin-right: 15px;
  color: #999;
}

.downIcon {
  font-size: 15px;
  color: #999;
  margin-left: 40px;
}

.content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.title {
  font-size: 14px;
  margin: 0;
}

.explain {
  font-size: 12px;
  color: #999;
}

.group-menu {
  box-sizing: border-box;
  position: absolute;
  left: 20px;
  top: 11vh;
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 5px 7px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
}

.docu {
  text-align: center;
  box-sizing: border-box;
  width: 98%;
  padding: 10px 20px;
  margin: 3px auto;
  border-radius: 10px;
  font-size: 16px;
}

.docu:hover {
  background-color: #ecf5ff;
  color: #409eff;
  cursor: pointer;
}

.enter {
  text-align: center;
  box-sizing: border-box;
  width: 98%;
  padding: 10px 20px;
  margin: 5px auto;
  border-radius: 10px;
  font-size: 16px;
}

.enter:hover {
  background-color: #ecf5ff;
  color: #409eff;
  cursor: pointer;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.summary {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.name {
  height: 40px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;

  :hover {
    cursor: pointer;
  }

  .FolderOpened {
    font-size: 20px;
  }
}

.more {
  margin-left: 1.2vw;
  margin-top: 3vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .innovate {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    height: 19vw;
    width: 14vw;
    margin-right: 3vw;

    img {
      width: 7vw;
      height: 7vw;
    }
  }
}

</style>
